<template>
    <div style="position:relative">
        <!-- staff-edit start -->
        <Form :model="formItem" :label-width="380" label-position="right">
            <Card :bordered="false" class="card">
                <p slot="title">人员修改</p>

                <FormItem label="姓名：">
                    <Input :disabled=' role > 2' v-model="formItem.username" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="所属部门：">
                    <Input :disabled=' role > 2' v-model="formItem.department" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="职位：">
                    <Input :disabled=' role > 2' v-model="formItem.position" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="电话号码：">
                    <Input :disabled=' role > 2' v-model="formItem.tel" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="用户类型：">
                    <RadioGroup v-model="formItem.role">
                        <Radio :label='1' disabled>admin用户</Radio>
                        <Radio :label='2' :disabled=' role > 2'>读写管理员</Radio>
                        <Radio :label='3' :disabled=' role > 2'>只读管理员</Radio>
                        <Radio :label='4' :disabled=' role > 2'>社区员工</Radio>
                    </RadioGroup>
                </FormItem>

                <FormItem :label=" formItem.role ==3?'查看范围：': '操作范围：'" v-if=" role < 3 ">
                    <CheckboxGroup v-model="formItem.admin_power" style="width:20vw">
                        <Checkbox style="width:80px" v-for="item in accessList" :key="item.id" :label="item.id"> {{ item.name }} </Checkbox>
                    </CheckboxGroup>
                </FormItem>

                <FormItem label="小程序权限：" v-if=" role < 3">
                    <CheckboxGroup v-model="itemArr" style="width:20vw" @on-change="changeUserSide">
                        <Checkbox style="width:150px" v-for="item in userSideLIst" :key="item.id" :label=" item.key "> {{ item.value }} </Checkbox>
                    </CheckboxGroup>
                </FormItem>

                <FormItem>
                    <Button class="saveBtn" type="primary" @click="save"> 保存 </Button>
                </FormItem>

            </Card>
        </Form><!-- end staff-edit  -->

        <!-- <Modal v-model="modal1" title="巡检权限" :loading="loading" :width="700" :mask-closable="false">
            <Scroll :height="600">
                <Form :model="formItem">
                    <div class="group">
                        <FormItem>
                            <Checkbox :value="checkAll" @click.prevent.native="handleCheckAll">北环分部</Checkbox>
                            <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
                                <Checkbox class="checkbox" label="0">11楼</Checkbox>
                                <Checkbox class="checkbox" label="1">12楼</Checkbox>
                                <Checkbox class="checkbox" label="2">13楼</Checkbox>
                                <Checkbox class="checkbox" label="3">14楼</Checkbox>
                                <span class="line"></span>
                            </CheckboxGroup>
                        </FormItem>
                    </div>
                </Form>
            </Scroll>

            <footer class="modalFooter" slot="footer">
                <Checkbox :value="checkAll" @click.prevent.native="handleCheckAll">全选</Checkbox>
                <div>
                    <Button type="default" @click="modal1=false">取消</Button>
                    <Button type="primary" @click="save">保存</Button>
                </div>
            </footer>
        </Modal> -->
        <Spin size="large" fix v-if="loading"></Spin>
    </div>
</template>
<script>
    import Cookies from 'js-cookie'
    import axios from '@/libs/api.request.js'
    import {
        mapMutations,
        mapGetters
    } from 'vuex'
    import {
        getMenuByRouter
    } from '@/libs/util.js'
    import routes from '@/router/routers'
    export default {
        name: 'staff-edit',
        data() {
            return {
                // modal1: false,
                // loading: false,
                // checkAll: false,
                // checkAllGroup: [],

                // 加载状态
                loading: false,


                // 菜单项列表
                accessList: [],

                // 小程序权限列表
                userSideLIst: [{
                        id: 1,
                        value: '每日数据查看权限',
                        key: 'data'
                    },
                    {
                        id: 2,
                        value: '日记账查看权限',
                        key: 'account'
                    },
                    {
                        id: 3,
                        value: '工作圈置顶功能',
                        key: 'circle_top'
                    },
                    {
                        id: 4,
                        value: '工作圈删除他人消息功能',
                        key: 'circle_del'
                    },
                    {
                        id: 5,
                        value: '事项中的公司选项',
                        key: 'matter_company'
                    },
                    {
                        id: 6,
                        value: '每日数据查看所有分部',
                        key: 'data_department'
                    },
                    {
                        id: 7,
                        value: '日记账查看所有分部',
                        key: 'account_department'
                    },
                ],

                // 默认小程序权限列表
                list: {
                    'data': 0,
                    'account': 0,
                    'circle_top': 0,
                    'circle_del': 0,
                    'matter_company': 0,
                    'data_department': 0,
                    'account_department': 0,
                },

                itemArr: [],
                // 人员修改对象
                formItem: {}
            }
        },
        methods: {
            ...mapMutations(['closeTag', 'removeCatchPages']),
            ...mapGetters(['getRole', 'menuList']),

            close() {
                /**
                 * 如果是调用closeTag方法，普通的页面传入的对象参数只需要写name字段即可
                 * 如果是动态路由和带参路由，需要传入query或params字段，用来区别关闭的是参数为多少的页面
                 */
                // 销毁缓存
                this.removeCatchPages(this.$options.name)
                this.closeTag({
                    name: "staff-edit",
                    params: {
                        id: this.$route.params.id
                    }
                });
            },


            // // 点击全选
            // handleCheckAll() {
            //     this.checkAll = !this.checkAll
            //     if (this.checkAll) {
            //         this.checkAllGroup = ['0', '1', '2', '3']
            //     } else {
            //         this.checkAllGroup = []
            //     }
            // },

            // // 复选框更改
            // checkAllGroupChange(data) {
            //     if (data.length == 4) {
            //         this.checkAll = true
            //     } else {
            //         this.checkAll = false
            //     }
            // },

            // 获取人员详情
            getStaffDetail() {
                this.loading = true
                let data = {
                    userid: this.formItem.id
                }
                axios.ajax_post('admin-user-ajax_get_user_detail', data).then(res => {
                    this.loading = false
                    if (res.data.code === 1) {
                        this.formItem = res.data.data.u_detail
                        // 默认小程序权限
                        if (this.formItem.user_power.length === 0) {
                            this.formItem.user_power = JSON.parse(JSON.stringify(this.list))
                        }
                        for (const j in this.formItem.user_power) {
                            if (this.formItem.user_power[j] == 1) {
                                this.itemArr.push(j)
                            }
                        }

                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })

            },

            changeUserSide(e) {
                this.formItem.user_power = JSON.parse(JSON.stringify(this.list))
                e.forEach(item => {
                    for (const key in this.formItem.user_power) {
                        if (key == item) {
                            this.formItem.user_power[key] = 1
                        }
                    }
                })
            },

            // 保存
            save() {
                let data = this.formItem
                data.userid = this.formItem.id
                // delete data.id

                axios.ajax_post('admin-user-ajax_save_user', data).then(response => {
                    if (response.data.code === 1) {
                        this.$Notice.success({
                            title: '修改成功',
                            duration: 3
                        })
                        this.close()
                    } else {
                        this.$Notice.error({
                            title: response.data.msg,
                            duration: 3
                        })
                    }
                })
            },
        },
        computed: {
            role() {
                return this.getRole()
            },
            menuArr() {
                return this.menuList()
            }
        },
        created() {
            this.formItem.id = this.$route.params.id
            this.getStaffDetail()

            this.menuArr.forEach((item) => {
                this.accessList.push({
                    id: item.meta.id,
                    name: item.meta.title,
                })
            })
        },
        activated() {
            if (this.formItem.id !== this.$route.params.id) {
                this.formItem.id = this.$route.params.id
                this.getStaffDetail()
            }
        }
    }
</script>

<style lang="less" scoped>
    .FormItemInput {
        width: 20vw;
    }

    .saveBtn {
        margin-top: 50px;
        width: 200px;
    }

    .card {
        width: 100%;
        height: 100%;
        background-color: #fff;
        padding: 20px;
    }

    .group {
        padding: 20px;
        border-bottom: 1px solid #e9e9e9;

        .checkbox {
            margin: 15px 30px 15px 0;
        }
    }

    .modalFooter {
        display: flex;
        justify-content: space-between;
    }
</style>